<template>
  <n-form ref="formRef" :model="model" :rules="rules">
    <n-form-item path="id" label="id">
      <n-input v-model:value="model.id" @keydown.enter.prevent />
    </n-form-item>
    <n-form-item path="name" label="姓名">
      <n-input v-model:value="model.name" @keydown.enter.prevent />
    </n-form-item>
    <n-row :gutter="[0, 24]">
      <n-col :span="24">
        <div style="display: flex; justify-content: flex-end">
          <n-button round type="primary" @click="handleConfirm">
            提交
          </n-button>
        </div>
      </n-col>
      <n-col :span="24">
        <div style="display: flex; justify-content: flex-end">
          <n-button round type="primary" @click="handleCanlen"> 取消 </n-button>
        </div>
      </n-col>
    </n-row>
  </n-form>
</template>
  <script>
import { defineComponent, ref } from "vue";
import {
  createDiscreteApi,
  NForm,
  NFormItem,
  NInput,
  NRow,
  NCol,
  NButton,
  NDataTable,
} from "naive-ui";

export default defineComponent({
  components: {
    createDiscreteApi,
    NForm,
    NFormItem,
    NInput,
    NRow,
    NCol,
    NButton,
    NDataTable,
  },
  props: {
    CateFromData: {
      type: Object,
    },
  },
  setup(props, ctx) {
    const formRef = ref(null);
    const rPasswordFormItemRef = ref(null);
    const message = createDiscreteApi(["message"]).message;
    const model = ref(null);
    const fromData = ref(props.CateFromData);
    const rules = {
      name: [
        {
          required: true,
          max: 5,
          message: "请输入密码",
        },
      ],
    };
    // 取消方法
    function handleCanlen() {
      ctx.emit("canHandle", props.CateFromData);
    }
    //确认方法
    // 确认
    function handleConfirm() {
      ctx.emit("handleConfirm", props.CateFromData);
    }
    return {
      handleConfirm,
      rules,
      handleCanlen,
      formRef,
      rPasswordFormItemRef,
      //  from中的值
      model: fromData.value,
      handleValidateButtonClick(e) {
        e.preventDefault();
        formRef.value?.validate((errors) => {
          if (!errors) {
            message.success("验证成功");
          } else {
            console.log(errors);
            message.error("验证失败");
          }
        });
      },
    };
  },
});
</script>